<template>
	<view class="page">
		<view class="main">
			<view class="tips">
				点击转发置顶按钮，转发到行业群或好友，可立即把自己的产品置顶到首页顶部。
			</view>
			<view class="tabs">
				<u-scroll-list :indicator="false" style="height: 100%;">
					<view class="tab" @click="changeType('all')" :class="productType === null?'active':''">
						全部产品
					</view>
					<view v-for="(item, index) in productTypeList" :key="index" class="tab"
						:class="productType === item.id?'active':''" @click="changeType(item.id,index)">
						{{item.typeName}}
					</view>
				</u-scroll-list>
			</view>
			<view class="classify-type" v-if="productTypeList1.length>0">
				<u-scroll-list :indicator="false">
					<view class="item" :class="productType1 === item.id?'active':''"
						v-for="(item, index) in productTypeList1" :key="index" @click="changeType1(item.id)">
						{{item.typeName}}
					</view>
				</u-scroll-list>
			</view>
			<view class="lists">
				<view class="list" v-for="(item, index) in lists" :key="index">
					<image class="pic" :src="item.productImg?fileServer+item.productImg:null"></image>
					<view class="msg">
						<view class="name">
							{{item.productName}}
						</view>
						<view class="price">
							<view class="text">
								<view class="red big">
									{{item.mll}}
								</view>
								<view class="red">
									毛利
								</view>
							</view>
							<view class="text">
								<view class="t1">
									售价：
								</view>
								<view class="red">
									¥{{item.price}}
								</view>

							</view>
							<view class="text" v-if="item.chandi">
								<view class="t">
									产地{{item.chandi}}
								</view>
							</view>
						</view>
						<view class="btn-list">
							<view class="btn" @click="delThis(item.id)">
								删除
							</view>
							<view class="btn" @click="editThis(item.id)">
								修改
							</view>
							<view class="btn" v-if="item.status==='0'" @click="sxjThis(item)">
								下架
							</view>
							<view class="btn active" v-if="item.status==='1'" @click="sxjThis(item)">
								上架
							</view>
							<view class="btn active">
								首页置顶
							</view>
						</view>
					</view>
				</view>
				<u-empty  v-if="lists.length==0"
				        mode="data"
				        icon="http://cdn.uviewui.com/uview/empty/list.png"
				>
				</u-empty>
			</view>
			<view class="share">
				分享给经销商
			</view>
			<view class="btm-btn-tc">

			</view>
			<view class="btm-btn" @click="add()">
				添加产品
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageIndex: 1,
				companyId: null,
				productTypeList: [],
				productTypeList1: [],
				lists: [],
				productType: null,
				productType1: null,
				fileServer: this.$fileServer,
			};
		},
		onShow() {
			this.lists = []
			this.pageIndex = 1
			this.getList()
		},
		onLoad(o) {
			this.companyId = o.id
			this.getProductTypeList()
		},
		onReachBottom() {
			++this.pageIndex
			this.getList()
		},
		methods: {
			editThis(id) {
				uni.navigateTo({
					url: "/pages/company/productAdd/productAdd?pid=" + id
				})
			},
			delThis(id) {
				uni.showModal({
					title: "是否删除该产品？",
					success: (modalRes) => {
						if (modalRes.confirm) {
							this.$api.company.delProductById({
								id: id
							}).then(res => {
								this.lists = []
								this.pageIndex = 1
								this.getList()
							})
						}
					}
				})
			},
			sxjThis(item) {
				uni.showModal({
					title: `是否${item.status==='0'?'下架':'上架'}该产品？`,
					success: (modalRes) => {
						if (modalRes.confirm) {
							this.$api.company.shangJiaOrXiajia({
								productId: item.id,
								state:item.status
							}).then(res => {
								this.lists = []
								this.pageIndex = 1
								this.getList()
							})
						}
					}
				})
			},
			add() {
				uni.navigateTo({
					url: "/pages/company/productAdd/productAdd?id=" + this.companyId
				})
			},
			changeType1(type) {
				this.productType1 = type
				this.lists = []
				this.pageIndex = 1
				this.getList()

			},
			changeType(type) {
				if (type === 'all') {
					this.productType = null
					this.productType1 = null
					this.productTypeList1 = []
					this.lists = []
					this.pageIndex = 1
					this.getList()
				} else {
					this.productType = type
					this.$api.company.getProductTypeList({
						productTypeId: this.productType
					}).then(res => {
						this.productTypeList1 = res.data
					})
				}
			},
			getProductTypeList() {
				this.$api.company.getProductTypeList({
					productTypeId: 0
				}).then(res => {
					this.productTypeList = res.data
				})
			},
			getList() {
				this.$api.company.getProductList({
					pageIndex: this.pageIndex,
					companyId: this.companyId,
					productTypeId: this.productType1
				}).then(res => {
					this.total = res.total
					if (res.rows.length > 0) {
						this.lists = this.lists.concat(res.rows)
					} else {
						--this.pageIndex
					}
				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	.page {
		background: #F8F9FA;min-height: 100vh;

		.main {
			width: 100%;
		}
	}

	.tips {
		position: fixed;
		top: 0;
		width: 100%;
		left: 0;
		background: #FCF5EF;
		color: #CC6C6C;
		font-size: 20rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		z-index: 2;
	}

	.tabs {
		width: 100%;
		background-color: #fff;
		height: 96rpx;
		margin-top: 72rpx;

		.tab {
			font-size: 28rpx;
			font-weight: bold;
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 40rpx;
			white-space: nowrap;

			&.active {
				font-size: 32rpx;
				color: #EC2424;
				position: relative;

				&::after {
					content: "";
					width: 46rpx;
					height: 4rpx;
					background: #EC2424;
					border-radius: 3rpx;
					position: absolute;
					bottom: 16rpx;
					left: 50%;
					transform: translateX(-50%);
				}

			}
		}
	}

	.lists {
		.list {
			display: flex;
			background-color: #fff;
			width: 100%;
			padding: 24rpx 32rpx 24rpx 36rpx;
			margin-bottom: 20rpx;

			.pic {
				flex-shrink: 0;
				width: 160rpx;
				height: 160rpx;

			}

			.msg {
				flex: 1;
				padding-left: 24rpx;

				.name {
					width: 100%;
					font-size: 26rpx;
					font-weight: bold;
					margin-bottom: 12rpx;
				}

				.price {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;

					.text {
						display: flex;
						align-items: center;
						margin-right: 40rpx;

						.big {
							font-weight: bold;
							font-size: 32rpx;
						}

						.red {

							color: #E83149;
						}

						.t {}
					}
				}

				.btn-list {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn {
						width: 116rpx;
						height: 50rpx;
						border-radius: 28rpx;
						border: 1px solid #EC2424;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #EC2424;

						&.active {

							color: #FFFFFF;
							background: #EC2424;
						}
					}
				}
			}
		}
	}

	.share {
		text-align: center;
		color: #777777;
		position: fixed;
		bottom: 132rpx;
		z-index: 2;
		width: 100%;
	}

	.btm-btn-tc {
		height: 160rpx;
		width: 100%;
	}

	.btm-btn {
		width: 684rpx;
		height: 70rpx;
		background: #EC2424;
		border-radius: 42rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: bold;
		position: fixed;
		bottom: 46rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;

	}

	.classify-type {
		margin-top: 24rpx;

		.item {
			width: auto;
			height: 56rpx;
			background: #EBEBEB;
			border-radius: 28rpx;
			padding: 0 12rpx;
			display: inline-block;
			margin-right: 20rpx;
			font-size: 28rpx;
			white-space: nowrap;
			line-height: 56rpx;

			&.active {
				background: #EC2424;
				color: #fff;
			}
		}
	}
</style>